<template>
  <div>
    <h1><i class="el-icon-menu"></i>商品管理</h1>
    <el-divider></el-divider>
    <div id="gongju">
      <el-button size="medium" @click="tab(1)">添加商品种类</el-button>
      <el-button size="medium" @click="tab(2)">查看商品类别</el-button>
      <el-button size="medium" @click="tab(3)">添加商品</el-button>
      <el-button size="medium" @click="tab(4)">查看商品</el-button>
    </div>
    <keep-alive>
      <div id="box">
        <transition
          enter-active-class="animated fadeInUpBig"
          leave-active-class="animated fadeOutDownBig"
        >
          <div v-show="sel == 1"><Tianjiazhonglei></Tianjiazhonglei></div>
        </transition>
        <transition
          enter-active-class="animated fadeInUpBig"
          leave-active-class="animated fadeOutDownBig"
        >
          <div v-show="sel == 2"><Chakanleibie></Chakanleibie></div>
        </transition>
        <transition
          enter-active-class="animated fadeInUpBig"
          leave-active-class="animated fadeOutDownBig"
        >
          <div v-show="sel == 3"><Tianjiashangpin></Tianjiashangpin></div>
        </transition>
        <transition
          enter-active-class="animated fadeInUpBig"
          leave-active-class="animated fadeOutDownBig"
        >
          <div v-show="sel == 4"><Chakanshangpin></Chakanshangpin></div>
        </transition></div
    ></keep-alive>
  </div>
</template>
<script>
import Tianjiazhonglei from "./Shangpinguanli/Tianjiazhonglei";
import Chakanleibie from "./Shangpinguanli/Chakanleibie";
import Tianjiashangpin from "./Shangpinguanli/Tianjiashangpin";
import Chakanshangpin from "./Shangpinguanli/Chakanshangpin";
export default {
  components: {
    Tianjiazhonglei,
    Chakanleibie,
    Tianjiashangpin,
    Chakanshangpin,
  },
  data() {
    return {
      sel: 4,
    };
  },
  methods: {
    tab(index) {
      this.sel = index;
    },
  },
};
</script>
<style scoped>
#gongju {
  height: 60px;
  background: rgb(231, 228, 228);
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 6px;
}
#gongju .el-button {
  background: blueviolet;
  color: white;
}
#box {
  height: 350px;
}
</style>